<template>
	<view class="box">
		<u-sticky>
			<view class="bg-white">
				<view>
					<searchNav @search="search" />
				</view>
				<view class="align-items-center tabs-list">
					<view class="flex-1" :class="{'active':tabIndex==0}" @click="tabClick(0)">商品</view>
					<view class="flex-1" :class="{'active':tabIndex==1}" @click="tabClick(1)">居家护理</view>
					<view class="flex-1" :class="{'active':tabIndex==2}" @click="tabClick(2)">便民服务</view>
				</view>

				<view class="bg-white z-1" v-if="tabIndex==0">
					<view class="align-items-center padding-l-r-30 sort-box">
						<view class="align-items-center" @click="getSort(1)">
							<text class="fs-26 color-333 margin-r-10">综合</text>
							<u-icon name="arrow-up" color="#707070" size="14" v-if="sortType==1"></u-icon>
							<u-icon name="arrow-down" color="#707070" size="14" v-else></u-icon>
						</view>
						<view class="align-items-center" @click="getSort(2)">
							<text class="fs-26 color-333 margin-r-10">销量</text>
							<u-icon name="arrow-up" color="#707070" size="14" v-if="sortType==2"></u-icon>
							<u-icon name="arrow-down" color="#707070" size="14" v-else></u-icon>
						</view>
						<view class="align-items-center" @click="getSort(3)">
							<text class="fs-26 color-333 margin-r-10">价格</text>
							<u-icon name="arrow-up" color="#707070" size="14" v-if="sortType==3"></u-icon>
							<u-icon name="arrow-down" color="#707070" size="14" v-else></u-icon>
						</view>
						<view class="flex-1"></view>
						<view class="img-box">
							<image src="/static/image/shop/sort.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="sortType-box">
						<view class="sortType-list bg-white padding-30" v-show="sortType ==1">
							<view class="color-0 fs-26 justifyContent-spaceBetween align-items-center"
								:class="{'active':sortIndex==1}" @click="setSort(1)">
								<text>综合排序</text>
								<image src="/static/image/shop/selected.png" mode="aspectFill"></image>
							</view>
							<view class="color-0 fs-26 margin-t-10 justifyContent-spaceBetween align-items-center"
								@click="setSort(2)" :class="{'active':sortIndex==2}">
								<text>新品优先</text>
								<image src="/static/image/shop/selected.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="sortType-list bg-white padding-30" v-show="sortType ==2">
							<view class="color-0 fs-26 justifyContent-spaceBetween align-items-center"
								:class="{'active':sortIndex==3}" @click="setSort(3)">
								<text>从高到低</text>
								<image src="/static/image/shop/selected.png" mode="aspectFill"></image>
							</view>
							<view class="color-0 fs-26 margin-t-10 justifyContent-spaceBetween align-items-center"
								@click="setSort(4)" :class="{'active':sortIndex==4}">
								<text>从低到高</text>
								<image src="/static/image/shop/selected.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="sortType-list bg-white padding-30" v-show="sortType ==3">
							<view class="color-0 fs-26 justifyContent-spaceBetween align-items-center"
								:class="{'active':sortIndex==5}" @click="setSort(5)">
								<text>从高到低</text>
								<image src="/static/image/shop/selected.png" mode="aspectFill"></image>
							</view>
							<view class="color-0 fs-26 margin-t-10 justifyContent-spaceBetween align-items-center"
								@click="setSort(6)" :class="{'active':sortIndex==6   }">
								<text>从低到高</text>
								<image src="/static/image/shop/selected.png" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<template v-if="tabIndex==0">
			<view style="padding: 20rpx 0;">
				<waterFall ref="waterFall"></waterFall>
			</view>
		</template>
		<template v-if="tabIndex==1">
			<view class="bg-white padding-l-r-25">
				<homeCareList :careList="careList" @reservation="reservation"></homeCareList>
			</view>
		</template>
		<template v-if="tabIndex==2">
			<view class="padding-l-r-30">
				<view class="title fs-32 fw-b color-0">社区医疗服务活动中心</view>
				<view class="padding-l-r-20 bg-white ">
					<freeClinic :activityList='activityList' @goDetails='goDetails' @signUp='signUp'></freeClinic>
				</view>
			</view>

		</template>
	</view>
</template>

<script>
	// 瀑布流组件
	import waterFall from '@/components/waterfall/index.vue';
	import homeCareList from '@/components/homeCare/list.vue'
	import searchNav from '@/components/searchNav/index.vue';
	import freeClinic from '@/components/freeClinic/index.vue'
	import {
		nurseList
	} from '@/api/homeCare.js'
	import {
		playList,
		playSign
	} from '@/api/service.js'
	export default {
		components: {
			waterFall,
			homeCareList,
			searchNav,
			freeClinic
		},
		data() {
			return {
				sortType: 0,
				tabIndex: 0,
				careList: [],
				welfareList: [],
				order_field: '',
				order_sort: '',
				page: 1,
				isMore: false,
				sortIndex: 0,
				activityList: []
			}
		},
		onLoad() {
			this.getInfo();
		},
		//上拉加载函数
		onReachBottom() {
			if (this.isMore) {
				setTimeout(() => {
					this.getList()
				}, 100)
			} else {
				uni.showToast({
					title: '暂无更多',
					icon: 'none'
				})
			}

		},
		onPullDownRefresh() {
			//刷新初始化数据
			this.getInfo()
			//关闭刷新动画
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			search(e) {
				this.keywords = e
				this.getInfo();
			},
			getWaterFallData() {
				this.$nextTick(() => {
					// 确保在这里访问 $refs 是安全的
					const myRef = this.$refs.waterFall;
					if (myRef) {
						this.$refs.waterFall.initList({
							keywords: this.keywords,
							order_field: this.order_field,
							order_sort: this.order_sort
						})
					}
				});
			},
			setSort(index) {
				this.sortIndex = index;
				let order_field = '',
					order_sort = ''
				if (index == 1) {
					order_field = 'weigh'
					order_sort = 'desc'
				} else if (index == 2) {
					order_field = 'createtime'
					order_sort = 'desc'
				} else if (index == 3) {
					order_field = 'sales'
					order_sort = 'desc'
				} else if (index == 4) {
					order_field = 'sales'
					order_sort = 'aesc'
				} else if (index == 5) {
					order_field = 'price'
					order_sort = 'desc'
				} else if (index == 6) {
					order_field = 'price'
					order_sort = 'aesc'
				}
				this.order_field = order_field
				this.order_sort = order_sort

			},
			getSort(index) {
				this.sortType = index;
			},
			reservation(item) {
				console.log(item)
			},
			tabClick(index) {
				this.tabIndex = index
				this.getInfo()
			},
			getInfo() {
				this.page = 1
				this.careList = []
				this.activityList = []
				this.isMore =true
				this.getList()

			},
			getList() {
				if (this.tabIndex == 1) {
					this.getNurseList()
				} else if (this.tabIndex == 2) {
					this.getPlayList()
				} else {
					this.getWaterFallData()
				}
			},
			// 便民服务
			getPlayList() {
				let data = {
						page: this.page,
						limit: 10,
						type: 1
					},
					arr = []
				playList(data).then(res => {
					if (res.code == 1) {
						arr = res.data
						arr.map(item => {
							let startDate = new Date(item.start_date);
							let endDate = new Date(item.end_date);
							let currentDate = new Date();
							// 判断当前日期是否在开始日期之前
							if (currentDate < startDate) {
								console.log("当前日期在开始日期之前");
								item.isBeforeStart = true
							}
							// 判断当前日期是否在结束日期之后
							else if (currentDate > endDate) {
								console.log("当前日期在结束日期之后");
								item.isAfterEnd = true
							}
							// 否则，当前日期在开始和结束日期之间（包含等于的情况）
							else {
								console.log("当前日期在开始日期和结束日期之间");
							}
						})
						this.activityList = this.activityList.concat(arr)
						if (res.data.length < 10) {
							this.isMore = false
						} else {
							this.isMore = true
							this.page++
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			goDetails(item) {
				uni.navigateTo({
					url: '/pageA/service/scienceDetails?id=' + item.id
				})
			},
			signUp(item) {
				playSign({
					play_id: [item.id]
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '报名成功',
							icon: 'none'
						})
						this.getPlayList()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 护士
			getNurseList() {
				let params = {
						page: this.page,
						limit: 10,
					},
					arr = []
				nurseList(params).then(res => {
					if (res.code == 1) {
						arr = res.data
						arr.map(item => {
							var type = item.tags.split(",");
							item.type = type
						})

						this.careList = this.careList.concat(arr)
						if (res.data.length < 10) {
							this.isMore = false
						} else {
							this.isMore = true
							this.page++

						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		background-color: #F7F7F7;
	}

	.tabs-list {
		height: 80rpx;
		text-align: center;
		border-bottom: 1px solid #DBDBDB;
		color: #000;
		font-size: 28rpx;

		.active {
			position: relative;
			font-weight: bold;

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: -10rpx;
				width: 30rpx;
				height: 4rpx;
				background: #000000;
				border-radius: 2rpx;
				transform: translateX(-50%);
			}
		}
	}

	.filter-box {
		justify-content: space-between;
		height: 70rpx;
		padding-left: 36rpx;
		padding-right: 66rpx;
		font-size: 26rpx;

		image {
			width: 16rpx;
			margin-left: 8rpx;
		}
	}

	.title {
		line-height: 104rpx;
	}

	.welfare-list {
		padding: 28rpx 20rpx;

		.welfare-img {
			width: 180rpx;
			height: 140rpx;
			min-width: 180rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.welfare-item {
			justify-content: space-between;
			height: 140rpx;
			padding-left: 20rpx;

			.btn {
				width: 160rpx;
				min-width: 160rpx;
				height: 60rpx;
				background: #F8FEFF;
				border-radius: 30rpx;
				border: 1px solid #43ABC4;
				color: #43ABC4;
				text-align: center;
				line-height: 60rpx;
			}
		}
	}

	.welfare-box {
		overflow: hidden;
		border-radius: 14rpx;
	}

	.line {
		margin: 0 20rpx;
	}

	.sortType-box {
		position: absolute;
		left: 0;
		top: 70rpx;
		width: 100%;

		.sortType-list {
			width: 100%;
			height: 200rpx;
			border-radius: 0 0 30rpx;
		}

		.align-items-center {
			height: 52rpx;
		}

		.active {
			image {
				display: block;
			}
		}

		image {
			display: none;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.sort-box {
		height: 70rpx;
		margin-top: 10rpx;

		.align-items-center {
			margin-right: 110rpx;
		}

		.img-box {
			width: 30rpx;
		}
	}
</style>